﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayouGPS.cshtml";
}

<link href="~/Content/cosoMenu.css" rel="stylesheet" />
<link href="~/Content/simple-sidebar.css" rel="stylesheet" />

<style>
    #sidebar-wrapper {
        z-index: 1000;
        position: absolute;
        left: 330px;
        width: 0;
        height: 100%;
        margin-left: -333px;
        overflow-y: auto;
        background: #fff;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

</style>
<div style="clear:both;">
    <h3 class="text-center fdb-title-search-form">Giám sát hành chính</h3>
    <div style="clear:both;">
        <nav class="navbar nv_gps">
            <div class="container-fluid">
                <ul class="nav navbar-nav nv_gpssub">
                    <li class="active bg"><a href="#">Giám sát</a></li>
                    <li class="bg"><a href="#">Lộ trình</a></li>
                    <li class="bg"><a href="#">Báo cáo BGT</a></li>
                    <li class="bg"><a href="#">Báo cáo nghiệp</a></li>
                    <li class="bg"><a href="#">Tiện ích</a></li>
                    <li class="bg"><a href="#">TCĐBVN</a></li>
                    <li class="bg"><a href="#">Quản trị</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper" style="clear:both;">
            <ul class="sidebar-nav">
                <li>
                    <div class="toolboxPanel" style="border-radius: 0 0px 7px 0px; height: 100%; display: block; box-shadow: 3px 3px 6px -3px #7f8181;">
                        <div style="padding: 5px">
                            <div class="toolbox-box">
                                <div id="toolbox_result">
                                    <div onclick="ToolboxBoxManager.hideToolboxMessage();">
                                    </div>
                                    <div id="toolbox_message">
                                    </div>
                                </div>
                                <div id="toolbox_form">
                                    <div class="tabbable">
                                        <ul class="nav nav-tabs" style="margin-bottom: 10px!important;">
                                            <li id="online_tab" class="active">
                                                <a href="#1" data-toggle="tab">
                                                    Giám sát
                                                </a>
                                            </li>
                                            <li id="route_tab">
                                                <a href="#2" data-toggle="tab">
                                                    Xem lại lộ trình
                                                </a>
                                            </li>
                                        </ul>
                                        <div class="tab-content">
                                            <div class="tab-pane active" id="1" style="padding-left: 0px">
                                                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <div class="SearchBoxBor">
                                                                    <div class="SearchBox">
                                                                        <a class="SearchSelect"><span></span></a>
                                                                        <input placeholder="Nhập xe cần tìm" id="txtSearchInput" class="SearchText inputText ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" type="text">
                                                                        <input value="Tìm kiếm" id="SearchBtn" class="SearchBtn" title="Tìm kiếm" type="button">
                                                                    </div>
                                                                </div>
                                                                <ul class="MapOptions" id="SelectSearchType" style="display: none;">
                                                                    <li class="topradius" id="liVehicle">
                                                                        <a>
                                                                            <span>
                                                                                Tìm xe
                                                                            </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="botradius" id="liAddress">
                                                                        <a>
                                                                            <span>
                                                                                Tìm địa chỉ
                                                                            </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="botradius" id="liLandmarkName">
                                                                        <a>
                                                                            <span>
                                                                                Tên điểm
                                                                            </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="botradius" id="liLatLng">
                                                                        <a>
                                                                            <span>
                                                                                Tìm tọa độ
                                                                            </span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="height: 5px"></td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <!--Group xe-->
                                                                <div class="float_left">
                                                                    <select id="ddlVehicleGroup" name="ddlVehicleGroup" class="font_tahoma_11px" style="height: 26px;
width: 120px">
                                                                        <option value="" selected="">Tất cả</option>
                                                                    </select>
                                                                </div>
                                                                <!--trang thai xe-->
                                                                <div class="float_left">
                                                                    <select id="ddlVehicleState" name="ddlVehicleState" class="font_tahoma_11px" style="height: 26px;
width: 120px">
                                                                        <option value="" selected="selected">
                                                                            Trạng thái xe
                                                                        </option>
                                                                        <option value="1">
                                                                            Bật máy
                                                                        </option>
                                                                        <option value="2">
                                                                            Tắt máy
                                                                        </option>
                                                                        <option value="3">
                                                                            Di chuyển
                                                                        </option>
                                                                        <option value="4">
                                                                            Dừng đỗ
                                                                        </option>
                                                                        <option value="5">
                                                                            Mất tín hiệu
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr id="tr_showHideAll" style="display: none;">
                                                            <td>
                                                                <input checked="checked" id="showHideAll" type="checkbox"> Hiển thị hết trên bản đồ
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <div class="float_left titleGray">
                                                                    DANH SÁCH XE
                                                                </div>
                                                                <div class="icon_img">
                                                                    <a href="#">
                                                                        <img id="MeaningOfIcon" src="../fonts/s_icon_question.png" title="Ý nghĩa biểu tượng xe" alt="">
                                                                    </a>
                                                                    <a href="#" id="lnkVehicleStatus">
                                                                        <img src="../fonts/searchCar.png" title="Hiện trạng hệ thống" alt="">
                                                                    </a>
                                                                    <a href="#" id="lnkRefreshList">
                                                                        <img src="../fonts/s_icon_refresh.png" title="Cập nhật mới dữ liệu" alt="">
                                                                    </a>
                                                                </div>
                                                                <div style="overflow: scroll; max-height: 300px; cursor: pointer; -moz-user-select: none;
-khtml-user-select: none;" class="clear" id="idClearOnline">
                                                                    <table id="tblVehicleList" class="table-bordered table font_tahoma_11px font_textAlign_center">
                                                                        <tr class="font_bold">
                                                                            <td>
                                                                                Biển số
                                                                            </td>
                                                                            <td>
                                                                                V (km/h)
                                                                            </td>
                                                                            <td>
                                                                                Thời gian
                                                                            </td>
                                                                        </tr>
                                                                        <tr id="tr_281046" vh_online="37A09565" class="">
                                                                            <td>
                                                                                <div class="float_left"><img id="281046_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div>
                                                                                <div id="281046_plate" class="float_left">37A09565</div>
                                                                            </td>
                                                                            <td id="281046_velocity">0</td>
                                                                            <td id="281046_time">18:39</td>
                                                                        </tr>
                                                                        <tr id="tr_279642" vh_online="37A0983" class=""><td><div class="float_left"><img id="279642_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="279642_plate" class="float_left">37A0983</div></td><td id="279642_velocity">0</td><td id="279642_time">18:42</td></tr>
                                                                        <tr id="tr_281017" vh_online="37A10747" class="colorOut"><td><div class="float_left"><img id="281017_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="281017_plate" class="float_left">37A10747</div></td><td id="281017_velocity">0</td><td id="281017_time">18:40</td></tr>
                                                                        <tr id="tr_279608" vh_online="37A26174" class="colorOut"><td><div class="float_left"><img id="279608_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="279608_plate" class="float_left">37A26174</div></td><td id="279608_velocity">0</td><td id="279608_time">18:39</td></tr>
                                                                        <tr id="tr_279988" vh_online="37A2656" class="colorOut"><td><div class="float_left"><img id="279988_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="279988_plate" class="float_left">37A2656</div></td><td id="279988_velocity">0</td><td id="279988_time">18:40</td></tr>
                                                                        <tr id="tr_280990" vh_online="37H5064" class="colorOut"><td><div class="float_left"><img id="280990_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="280990_plate" class="float_left">37H5064</div></td><td id="280990_velocity">0</td><td id="280990_time">18:39</td></tr>
                                                                        <tr id="tr_279640" vh_online="37M00010" class="colorOut"><td><div class="float_left"><img id="279640_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="279640_plate" class="float_left">37M00010</div></td><td id="279640_velocity">0</td><td id="279640_time">18:41</td></tr>
                                                                        <tr id="tr_279725" vh_online="37M00013" class="colorOut"><td><div class="float_left"><img id="279725_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="279725_plate" class="float_left">37M00013</div></td><td id="279725_velocity">0</td><td id="279725_time">18:42</td></tr>
                                                                        <tr id="tr_279785" vh_online="37M00016" class="colorOut"><td><div class="float_left"><img id="279785_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="279785_plate" class="float_left">37M00016</div></td><td id="279785_velocity">0</td><td id="279785_time">18:39</td></tr>
                                                                        <tr id="tr_279609" vh_online="37M00017" class="colorOut"><td><div class="float_left"><img id="279609_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="279609_plate" class="float_left">37M00017</div></td><td id="279609_velocity">0</td><td id="279609_time">18:40</td></tr>
                                                                        <tr id="tr_268524" vh_online="37M00018" class="colorActive"><td><div class="float_left"><img id="268524_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="268524_plate" class="float_left">37M00018</div></td><td id="268524_velocity">0</td><td id="268524_time">18:41</td></tr>
                                                                        <tr id="tr_279627" vh_online="37M00024" class="colorOut"><td><div class="float_left"><img id="279627_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="279627_plate" class="float_left">37M00024</div></td><td id="279627_velocity">0</td><td id="279627_time">18:41</td></tr>
                                                                        <tr id="tr_270789" vh_online="37M00026" class="colorOut"><td><div class="float_left"><img id="270789_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="270789_plate" class="float_left">37M00026</div></td><td id="270789_velocity">0</td><td id="270789_time">18:39</td></tr>
                                                                        <tr id="tr_281011" vh_online="37N8696" class="colorOut"><td><div class="float_left"><img id="281011_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="281011_plate" class="float_left">37N8696</div></td><td id="281011_velocity">0</td><td id="281011_time">18:40</td></tr>
                                                                        <tr id="tr_281072" vh_online="37S1166" class="colorOut">
                                                                            <td><div class="float_left"><img id="281072_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="281072_plate" class="float_left">37S1166</div></td>
                                                                            <td id="281072_velocity">0</td>
                                                                            <td id="281072_time">18:41</td>
                                                                        </tr>
                                                                        <tr id="tr_281033" vh_online="37S3556"><td><div class="float_left"><img id="281033_icon" src="../fonts/Gray0.png" alt="" height="20px" width="20px"></div><div id="281033_plate" class="float_left">37S3556</div></td><td id="281033_velocity">0</td><td id="281033_time">18:40</td></tr>
                                                                        <tr id="tr_279628" vh_online="37M00019"><td><div class="float_left"><img id="279628_icon" src="../fonts/Blue0.png" alt="" height="20px" width="20px"></div><div id="279628_plate" class="float_left">37M00019</div></td><td id="279628_velocity">3</td><td id="279628_time">18:16</td></tr>
                                                                        <tr id="tr_279632" vh_online="37M00022"><td><div class="float_left"><img id="279632_icon" src="../fonts/Warn0.png" alt="" height="20px" width="20px"></div><div id="279632_plate" class="float_left">37M00022</div></td><td id="279632_velocity">0</td><td id="279632_time">09:09</td></tr>
                                                                        <tr id="tr_279607" vh_online="37M00023"><td><div class="float_left"><img id="279607_icon" src="../fonts/Warn0.png" alt="" height="20px" width="20px"></div><div id="279607_plate" class="float_left">37M00023</div></td><td id="279607_velocity">0</td><td id="279607_time">15:49</td></tr>
                                                                        <tr id="tr_279769" vh_online="37M00025"><td><div class="float_left"><img id="279769_icon" src="../fonts/Warn0.png" alt="" height="20px" width="20px"></div><div id="279769_plate" class="float_left">37M00025</div></td><td id="279769_velocity">0</td><td id="279769_time">23:12</td></tr>
                                                                        <tr id="tr_279661" vh_online="37N9065"><td><div class="float_left"><img id="279661_icon" src="../fonts/Warn0.png" alt="" height="20px" width="20px"></div><div id="279661_plate" class="float_left">37N9065</div></td><td id="279661_velocity">37</td><td id="279661_time">16:58</td></tr>
                                                                        <tr id="tr_279724" vh_online="37N9611"><td><div class="float_left"><img id="279724_icon" src="../fonts/Warn0.png" alt="" height="20px" width="20px"></div><div id="279724_plate" class="float_left">37N9611</div></td><td id="279724_velocity">5</td><td id="279724_time">09:24</td></tr>
                                                                    </table>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td id="tdSummaryVehicle"><b>  Tổng số xe: 22/22</b></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="tab-pane" id="2">
                                                <div>
                                                    <table style="width: 100%; text-align: right" class="font_tahoma_11px" cellspacing="0" cellpadding="0">
                                                        <tbody>
                                                            <tr>
                                                                <td colspan="2">
                                                                    <div class="well form-search">
                                                                        <label style="float: left">
                                                                            Từ ngày
                                                                        </label>
                                                                        <input style="margin-left: 10px; width: 50px; height: 15px" id="fromTimePicker" value="00:00" maxlength="5" class="inputHeightOverride12 hasTimepicker" type="text">
                                                                        <input style="width: 80px; height: 15px" id="fromDatePicker" class="inputHeightOverride12 hasDatepicker" type="text">
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="2">
                                                                    <div class="well form-search">
                                                                        <label style="float: left">
                                                                            Đến ngày
                                                                        </label>
                                                                        <input style="margin-left: 10px; width: 50px; height: 15px" id="toTimePicker" maxlength="5" class="inputHeightOverride12 hasTimepicker" type="text">
                                                                        <input style="width: 80px; height: 15px" id="toDatePicker" class="inputHeightOverride12 hasDatepicker" type="text">
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td align="left">
                                                                    <input id="txtVehiclePlateRotue" style="width: 120px; margin-top: 10px;
height: 12px;" placeholder="Biển số xe" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" type="text">
                                                                </td>
                                                                <td align="right">
                                                                    <a id="lnkViewRoute" class="btn btn-primary btnOverride" style="font-size: 11px; margin-right: 2px" href="javascript:void(0)">
                                                                        Xem lại lộ trình
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->
       

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div>
                <a href="#menu-toggle" class="toolboxButtonUp" id="menu-toggle"></a>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Bản đồ thì để vào đây</h1>
                        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>

                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
    <!-- /#wrapper -->
    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Menu Toggle Script -->
    <script>
        $("#menu-toggle").click(function (e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
        });
    </script>
</div>

